<template>
	<view class="content">
		<!--		<uni-forms ref="form1" :value="form1" labelWidth="80px" :border="true" class="bg-white margin-top-lg">-->
		<!--			<uni-forms-item name="deal1" label="处理单位" class="margin-left margin-right flexcenter">-->
		<!--				<view class="flexrowflexend  ">-->
		<!--          <text class="text-black text-sm text-center">qweq</text>-->
		<!--        </view>-->
		<!--			</uni-forms-item>-->
		<!--		</uni-forms>-->
		<uni-forms ref="form" :value="form" labelWidth="80px" :border="true" class="bg-white margin-top-lg">
			<uni-forms-item name="remark" label="处理结果" class="margin-left margin-right" style="margin-top: 10px">
				<uni-easyinput type="textarea" confirmType="done" v-model="form.remark" placeholder="请填写处理结果" />
			</uni-forms-item>
			<!--  @click.native="gotochooseimages" -->
			<uni-forms-item name="urllistdes" label="处理照片" class="margin-left margin-right">
				<view class="flexrowflexend">
					<!-- <image v-for="urllistitem in urllist" class="image" 
					:src="urllistitem" 
					/> -->
					<upload v-model="form.handleImg"></upload>
				</view>
			</uni-forms-item>
			<uni-forms-item name="handleTime" label="处理时间" class="margin-left margin-right flexrowcenter">
				<uni-datetime-picker class="flexrowflexend" type="datetime" v-model="form.handleTime" ref="pickerRef"></uni-datetime-picker>
			</uni-forms-item>

			<uni-forms-item name="handleStatic" label="解决状态" class="margin-left margin-right flexrowcenter">
				<view class="flexrowflexend" @click="openActionSheet">
					<view class="text-gray text-df margin-right-xs">{{ onhandleStaticDes(form.handleStatic) }}</view>
					<uni-icons type="forward" color="#000000" size="20"></uni-icons>
				</view>
			</uni-forms-item>
		</uni-forms>
		<view class="button-container">
			<button type="primary" class="button" @click="savebtn">保存</button>
		</view>
	</view>
</template>
<!-- https://img.alicdn.com/imgextra/i4/O1CN01dNRk9s1l7cuFqZEix_!!6000000004772-2-tps-120-120.png -->
<script>
import { handleCreate, updateHandle } from '@/api/police/index';
import dayjs from 'dayjs';
export default {
	data() {
		return {
			urllist: [],
			dealres: '',
			// form1: {
			// 	deal1: '123',
			// },
			form: {
				remark: '',
				handleImg: '',
				handleTime: '',
				handleStatic: 1
			},
			rules1: {
				deal1: {
					rules: [
						{
							required: true,
							errorMessage: '处理单位不能为空'
						}
					]
				}
			},
			rules: {
				remark: {
					rules: [
						{
							required: true,
							errorMessage: '处理结果不能为空'
						}
					]
				},
				handleImg: {
					rules: [
						{
							required: true,
							errorMessage: '处理照片需要上传'
						}
					]
				},
				handleTime: {
					rules: [
						{
							required: true,
							errorMessage: '处理时间不能为空'
						}
					]
				},
				handleStatic: {
					rules: [
						{
							required: true,
							errorMessage: '需要选择解决状态'
						}
					]
				}
			},
			paramsdetail: {},
			isHandle: false
		};
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
		// this.$refs.form1.setRules(this.rules1)
	},
	onLoad(query) {
		const { data } = query || {};
		this.paramsdetail = JSON.parse(data);
		console.log('paramsdetail>>>', this.paramsdetail);
		this.form = this.paramsdetail;
		const that = this;
		if (this.paramsdetail.handleStatic === 2) {
			this.paramsdetail.handleStatic = 1;
		} else {
			this.isHandle = true;
		}
		uni.$on('imgUrls', function (imgUrls) {
			const urllist = imgUrls.urllist;
			that.urllist = urllist;
			console.log('监听到事件来自imgUrls', urllist);
			console.log('监听到事件来自urllist.join(', ')', urllist.join(','));
			that.form.urllistdes = urllist.join(',');
		});
	},
	onUnload() {
		uni.$off('imgUrls');
	},

	methods: {
		onhandleStaticDes(data) {
			if (data === 0) {
				return '未解决';
			}
			if (data === 1) {
				return '已解决';
			}
			return '未处理';
		},
		savebtn() {
			console.log('this.deviceId', this.deviceId);
			console.log('handleUserId>', this.handleUserId);
			console.log('remark', this.form.remark);
			console.log('handleImg', this.form.urllistdes);
			console.log('this.handleTime', this.form.handleTime); //上传图片回显
			console.log('handleStatic', this.form.handleStatic); //0 未解决  //1 已解决   //2 未处理
			// this.$refs.form1.validate()
			this.$refs.form.validate().then((res) => {
				// updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
				//   this.$modal.msgSuccess("修改成功")
				// })
				if (this.isHandle) {
					updateHandle({
						id: this.form.id,
						deviceId: this.form.deviceId,
						// handleUserId: this.handleUserId,
						remark: this.form.remark,
						handleImg: this.form.handleImg,
						handleTime: dayjs(this.form.handleTime).valueOf(), //上传图片回显
						handleStatic: this.form.handleStatic //0 未解决  //1 已解决   //2 未处理
					}).then(({ data }) => {
						if (data) {
							uni.$emit('refresh-handle-update', true);
							uni.$emit('refresh-police-list', true);
							uni.navigateBack();
						}
					});
				} else {
					handleCreate({
						id: this.form.id,
						deviceId: this.form.deviceId,
						// handleUserId: this.handleUserId,
						remark: this.form.remark,
						handleImg: this.form.handleImg,
						handleTime: dayjs(this.form.handleTime).valueOf(), //上传图片回显
						handleStatic: this.form.handleStatic //0 未解决  //1 已解决   //2 未处理
					}).then(({ data }) => {
						if (data) {
							uni.$emit('refresh-handle-create', true);
							uni.$emit('refresh-police-list', true);
							uni.navigateBack();
						}
					});
				}
			});
		},
		gotochooseimages() {
			uni.navigateTo({
				url: '/pages/common/choose-img/choose-img'
			});
		},
		openActionSheet() {
			let itemInfo = ['未解决', '已解决'];
			uni.showActionSheet({
				// title: '选择',
				itemList: itemInfo,
				itemColor: '#333333',
				success: (e) => {
					// console.log(e.tapIndex);
					// uni.showToast({
					//   title: "点击了第" + e.tapIndex + "个选项",
					//   icon: "none"
					// })
					if (e.tapIndex === 0) {
						this.form.handleStatic = 0;
					} else if (e.tapIndex === 1) {
						this.form.handleStatic = 1;
					}
				},
				fail: (e) => {
					console.log(e);
				}
			});
		}
	}
};
</script>
<style scoped>
.content {
	height: 100%;
	padding-bottom: calc(var(--window-bottom) + 20px);
	padding-top: 36 rpx;
	/*padding: 15px;*/
	background-color: #f7f7f7;
}

.image {
	width: 50px;
	height: 50px;
	margin-left: 10px;
}

.button-container {
	margin-top: 300rpx;
	display: flex;
	height: 50px;
}

.button {
	flex: 1;
	margin-right: 10px;
	margin-left: 10px;
	height: 100%;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	border-radius: 5px;
	color: #fff;
}
</style>
